<template>
    <div class="container">
        <!-- 搜索 -->
        <div class="search-class">
            <a-space>
                <a-select v-model="searchCondition.difficultLevel" placeholder="题目难度" allow-clear>
                    <a-option value="一星级">一星级</a-option>
                    <a-option value="二星级">二星级</a-option>
                    <a-option value="三星级">三星级</a-option>
                </a-select>
                <a-select v-model="searchCondition.tagList" size="small" placeholder="选择标签" multiple>
                    <a-option>Java</a-option>
                    <a-option>C++</a-option>
                    <a-option>数据结构</a-option>
                    <a-option>算法</a-option>
                </a-select>
                <a-input v-model="searchCondition.no" placeholder="问题编号" allow-clear />
                <a-input v-model="searchCondition.title" placeholder="问题标题" allow-clear />
                <a-button type="primary" shape="round" @click="doSearch">搜索</a-button>
            </a-space>
        </div>

        <div class="add-button-class">
            <a-button type="primary" @click="handleClick">新增</a-button>
        </div>

        <!-- 表格 -->
        <div class="question-list-class">
            <a-table :columns="columns" :data="data" :pagination="false">
                <template #optional="{ record }">
                    <a-button type="outline" @click="queryQuestionDetail(record.id)">查看</a-button>
                    <a-button type="primary" style="margin-left: 6px;" @click="doUpdateOpen(record.id)">修改</a-button>
                    <a-popconfirm content="确认删除?" @ok="doDelete(record.id)">
                        <a-button status="danger" style="margin-left: 6px;">删除</a-button>
                    </a-popconfirm>
                </template>
            </a-table>
            <div>
                <a-pagination :total="page.total" @change="doPageChange" />
            </div>
        </div>

        <!-- 弹框 -->
        <div class="popup-class">
            <template>
                <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
                    <template #title>
                        {{ title }}
                    </template>
                    <div class="popup-body-class">
                        <a-form :model="form">
                            <a-form-item field="title" label="题目标题">
                                <a-input v-model="form.title" placeholder="请输入题目标题" />
                            </a-form-item>
                            <a-form-item field="description" label="题目描述">
                                <a-textarea v-model="form.description" placeholder="请输入题目描述" allow-clear />
                            </a-form-item>
                            <a-form-item field="description" label="题目描述">
                                <a-select v-model="form.difficultLevel" placeholder="题目难度" allow-clear>
                                    <a-option value="一星级">一星级</a-option>
                                    <a-option value="二星级">二星级</a-option>
                                    <a-option value="三星级">三星级</a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item field="tagList" label="标签">
                                <a-select v-model="form.tagList" size="small" placeholder="选择标签" multiple>
                                    <a-option>Java</a-option>
                                    <a-option>C++</a-option>
                                    <a-option>数据结构</a-option>
                                    <a-option>算法</a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item field="memoryLimit" label="内存限制">
                                <a-input-number v-model="form.memoryLimit" :style="{ width: '320px' }"
                                    placeholder="请输入内存限制" class="input-demo" />
                            </a-form-item>
                            <a-form-item field="timeLimit" label="时间限制">
                                <a-input-number v-model="form.timeLimit" :style="{ width: '320px' }"
                                    placeholder="请输入时间限制" class="input-demo" />
                            </a-form-item>
                            <a-form-item field="input" label="输入">
                                <a-textarea v-model="form.input" placeholder="请输入说明" allow-clear />
                            </a-form-item>
                            <a-form-item field="output" label="输出">
                                <a-textarea v-model="form.output" placeholder="请输出说明" allow-clear />
                            </a-form-item>
                            <a-form-item v-for="(post, index) of form.exampleDTOList" :field="`posts[${index}].value`"
                                :label="`样例-${index}`" :key="index">
                                <a-space direction="vertical" size="large">
                                    <a-textarea v-model="post.input" placeholder="样例输入" allow-clear />
                                </a-space>
                                <a-space direction="vertical" size="large">
                                    <a-textarea v-model="post.output" placeholder="样例输出" allow-clear />
                                </a-space>
                                <a-button @click="handleDelete(index)" :style="{ marginLeft: '10px' }">Delete</a-button>
                            </a-form-item>
                            <div>
                                <a-button style="float: right; margin-bottom: 10px" @click="handleAdd">新增样例</a-button>
                            </div>
                            <a-form-item field="tip" label="提示">
                                <a-textarea v-model="form.tip" placeholder="请输入提示" allow-clear />
                            </a-form-item>
                        </a-form>


                    </div>
                </a-modal>
            </template>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { questionQueryPage, questionDelete, questionAdd, questionQueryDetails, questionEdit } from '@/api/question';
import { Message } from '@arco-design/web-vue';

// 弹框 title
const title = ref('新增问题')

// 分页数据
const page = ref({
    total: 0,
    currentPage: 1,
    pageSize: 10,
})

// 定义表单数据结构
const formData = {
    description: '',
    difficultLevel: '',
    exampleDTOList: [
        {
            input: '',
            output: '',
        }
    ],
    input: '',
    memoryLimit: 0,
    output: '',
    tagList: [],
    timeLimit: 0,
    tip: '',
    title: '',
}

// 创建表单响应式变量
const form = ref({
    ...formData
})

// 搜索条件定义
const searchCondition = ref({
    difficultLevel: '',
    tagList: [],
    no: '',
    title: '',
})

// 定义列表表头
const columns = [
    {
        title: '题目编号',
        dataIndex: 'no',
    },
    {
        title: '问题标题',
        dataIndex: 'title',
    },
    {
        title: '难度等级',
        dataIndex: 'difficultLevel',
    },
    {
        title: '标签',
        dataIndex: 'tagList',
    },
    {
        title: '提交',
        dataIndex: 'submitNum',
    },
    {
        title: '解决',
        dataIndex: 'solveNum',
    },
    {
        title: '通过率',
        dataIndex: 'passRate',
    },
    {
        title: '操作',
        slotName: 'optional'
    }
];

// 列表数据对象
const data = ref([]);

/**
 * 修改问题
 */
const doUpdate = async () => {
    await questionEdit(form.value);
    Message.success('修改成功')
}

// 表单中操作动态表单项目
const handleAdd = () => {
    form.value.exampleDTOList.push({
        input: '',
        output: '',
    })
};
const handleDelete = (index: any) => {
    form.value.exampleDTOList.splice(index, 1)
}

// 控制对话框是否可见
const visible = ref(false);

// 编辑按钮打开弹框
const handleClick = () => {
    title.value = '新增问题'
    visible.value = true;
};

// 对话框关闭事件
const handleCancel = () => {
    visible.value = false;
    form.value = formData;
}


/**
 * 加载页面数据
 */
const loadData = async (currentPage: number, pageSize: number) => {
    const res = await questionQueryPage(currentPage, pageSize, searchCondition.value);
    page.value.total = res.data.total;
    data.value = res.data.records;
    Message.success('请求成功');
}

onMounted(async () => {
    loadData(page.value.currentPage, page.value.pageSize);
});


/**
 * 删除问题
 * @param value 
 */
const doDelete = async (value: number) => {
    const res = await questionDelete(value);
    Message.success('删除成功')
    // 重新加载数据
    loadData(page.value.currentPage, page.value.pageSize);
}


/**
 * 搜索
 */
const doSearch = () => {
    loadData(page.value.currentPage, page.value.pageSize);
}


// 对话框点击确认事件
const handleOk = async () => {
    // 根据不同的状态，进行不同的问题操作
    const tempTitle = title.value;
    if (tempTitle === '新增问题') {
        await questionAdd(form.value)
        Message.success('新增成功')
        visible.value = false;
        // 刷新列表
        loadData(1, page.value.pageSize);
    }
    if (tempTitle === '查看问题') {
        visible.value = false;
    }
    if (tempTitle === '修改问题') {
        await doUpdate();
        visible.value = false;
        loadData(page.value.currentPage, page.value.pageSize);
    }
};

/**
 * 查询问题详情
 */
const queryQuestionDetail = async (id: number) => {
    title.value = '查看问题';
    // 查询问题详情
    const res = await questionQueryDetails(id);
    // 打开弹框
    visible.value = true;
    // 给表单赋值
    form.value = res.data
}

/**
 * 修改问题弹框打开
 * @param id 
 */
const doUpdateOpen = (id: number) => {
    // 查询数据
    queryQuestionDetail(id);
    title.value = '修改问题';
}

/**
 * 分页页码改变函数
 * @param current 
 */
const doPageChange = (current: number) => {
    page.value.currentPage = current;
    // 重新加载数据
    loadData(current, page.value.pageSize)
}


</script>

<style lang="less" scoped>
.container {
    background-color: var(--color-fill-2);
    padding: 16px 20px;
    padding-bottom: 0;
}

.search-class {
    margin: 20px 0px;
    border: 1px solid #dddbdb;
    padding-right: 30px;
}

.add-button-class {
    margin-bottom: 20px;
}

.arco-modal {
    width: 1000px;
}
</style>